<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/dianxin .css" />
    <link rel="stylesheet" href="./font_4003687_mi6g8a6ikt/iconfont.css" />
    <link rel="stylesheet" href="css/swiper.css" />
  </head>
  <body>
    <header>
      <a href="./智慧商城首页.html">
        <span><</span>
      </a>
      <p>商品详情页</p>
    </header>
    <div class="box">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/10053.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10054s.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10055.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10056.jpg" width="100%" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./imgs/10057.jpg" width="100%" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="nav">
        <div class="lpl">
          <div class="lol">
            <span class="lp">￥</span>
            <span class="lp">88.00</span>
            <del><span class="lo">￥108.00</span></del>
          </div>
          <div class="sun">
            <span>已售9891件</span>
          </div>
        </div>
        <div class="son">
          <span
            >新茶日照充足 高山绿茶云雾茶绿茶炒青茶毛尖茶浓香型茶叶散装500g</span
          >
        </div>
      </div>
      <div class="text">
        <div class="sum">
          <p><i class="iconfont icon-duigou"></i>七天无理由退货</p>
          <p><i class="iconfont icon-duigou"></i>48小时发货</p>
        </div>
        <div class="som"><span>></span></div>
      </div>
      <div class="web">
        <span>商品描述</span>
      </div>
      <img src="./imgs/10058.gif" alt="" />
      <img src="./imgs/10059.jpg" alt="" />
      <img src="./imgs/10060.jpg" alt="" />
      <img src="./imgs/10061.jpg" alt="" />
      <img src="./imgs/10062.jpg" alt="" />
      <img src="./imgs/10063.jpg" alt="" />
      <img src="./imgs/10064.jpg" alt="" />
      <img src="./imgs/10065.jpg" alt="" />
      <img src="./imgs/10066.jpg" alt="" />
      <img src="./imgs/10067.jpg" alt="" />
      <img src="./imgs/10068.jpg" alt="" />
      <img src="./imgs/10069.jpg" alt="" />
      <img src="./imgs/10070.jpg" alt="" />
      <img src="./imgs/10071.jpg" alt="" />
    </div>
    <footer>
      <div class="mask">
        <a href="./智慧商城首页.html">
          <i class="iconfont icon-shouye"></i>
          <p>首页</p>
        </a>
        <a href="./购物车.html">
          <i class="iconfont icon-gouwuchekong"></i>
          <p>购物车</p>
        </a>
      </div>
      <div class="main">
        <a href="#">
          <div class="min">加入购物车</div>
        </a>
        <a href="#">
          <div class="max">立即购买</div>
        </a>
      </div>
    </footer>
  </body>
  <script src="js/swiper.js"></script>
</html>
<script>
  var mySwiper = new Swiper('.swiper', {
    speed: 300,
    loop: true,
    autoplay: {
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination'
    },
    centeredSlides: true,
    observer: true,
    observeParents: true
  })
</script>
